<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>登录</title>
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css">
    <link rel="stylesheet" href="/lib/public.css" media="all">

    <style>
        body {
            background-image: url(/images/login-bg-zl.jpg);
            background-size: cover;
        }
        .login-box {
            margin-top: 200px;
            background: rgba(255, 255, 255, 0.95);
            padding: 25px 20px;
            border-radius: 8px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.3);
            transition: all 0.3s;
        }
        .login-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.4);
        }
        .system-name {
            text-align: center;
            font-size: 24px;
            color: #333;
            margin-bottom: 15px;
        }
        .layui-input-block, .layui-form-mid {
            max-width: 300px; /* 控制输入框长度 */
            margin: auto;
        }
    </style>
</head>
<body >
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md6 layui-col-md-offset3 login-box">
            <div class="system-name">阅读天地 - 登录</div>
            <form class="layui-form" action="" method="post" id="loginForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-block">
                        <input type="text" name="captchaInput" required style="display: inline; width: 100px" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                        <img src="/api/admin/captcha" onclick="this.src=this.src+'?d='+Math.random()">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--<form id="loginForm" class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">验证码</label>
        <div class="layui-input-block">
            <input type="text" name="captchaInput" required style="display: inline; width: 100px" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
            <img src="/api/admin/captcha" onclick="this.src=this.src+'?d='+Math.random()">
        </div>
    </div>
    <div class="layui-form-item" align="center">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="login">立即提交</button>
        </div>
    </div>
</form>-->


<script src="/lib/layui-v2.6.3/layui.js"></script>
<script>
    //Demo
    layui.use(['form','layer'], function(){
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;


        //提交
        form.on('submit(login)', function(data){
            event.preventDefault();
            $.ajax({
                url: "/api/admin/login",
                type: "POST",
                data: $("#loginForm").serialize(),
                dataType: "JSON",
                success: function (resp) {
                    console.log(resp);
                    layer.msg(resp.msg);
                    if(resp.code === 10000){
                        window.location.href = "/index.html";
                    }
                }
            })
        });


    });
</script>
</body>
</html>